<script setup lang="ts">
import {reactive,ref} from 'vue'
import Demo from './components/Demo.vue'

const person = {
  name:"xiaoming",
  age:20
}
const p = ref<{
  name:string,
  age:number
}>(person)
p.value.age = 20
const p1 = reactive<{
  name:string,
  age:number
}>({name:"xiaohong",age:22})
p1.name = "xxx"

function addAge(){
  p.value.age++
}
</script>


<template>
  <div id="gen">
    <div>这是根组件</div>
    <div>{{ p.name }}</div>
    <div>{{ p.age }}</div>
    <div>{{ p1.name }}</div>
    <Demo :age="p.age" @add="addAge"></Demo>
  </div>
</template>

<style scoped>
  #gen{
    background-color: red;
    padding: 30px;
  }
</style>
